<section id="community" class="py-20 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">加入我们的社区</h2>
      <p class="text-dark/70 text-lg">与其他开发者交流，获取帮助，分享你的经验</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Gitee 仓库 -->
      <div class="bg-light rounded-xl p-6 text-center hover:shadow-md transition-custom">
        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-git text-primary text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">Gitee 仓库</h3>
        <p class="text-dark/70 text-sm mb-4">访问我们的代码仓库，提交 issues 和 PR</p>
        <a href="https://gitee.com/jcnc-org/snow" target="_blank" class="text-primary hover:underline inline-flex items-center">
          访问 <i class="fa fa-external-link ml-1"></i>
        </a>
      </div>
      
      <!-- 讨论区 -->
      <div class="bg-light rounded-xl p-6 text-center hover:shadow-md transition-custom">
        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-comments text-primary text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">讨论区</h3>
        <p class="text-dark/70 text-sm mb-4">提问、分享经验和参与讨论的地方</p>
        <a href="#" class="text-primary hover:underline inline-flex items-center">
          进入 <i class="fa fa-external-link ml-1"></i>
        </a>
      </div>
      
      <!-- 微信群 -->
      <div class="bg-light rounded-xl p-6 text-center hover:shadow-md transition-custom">
        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-weixin text-primary text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">微信群</h3>
        <p class="text-dark/70 text-sm mb-4">加入我们的微信群，与开发者实时交流</p>
        <a href="#" class="text-primary hover:underline inline-flex items-center">
          加入 <i class="fa fa-external-link ml-1"></i>
        </a>
      </div>
      
      <!-- 邮件列表 -->
      <div class="bg-light rounded-xl p-6 text-center hover:shadow-md transition-custom">
        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-envelope text-primary text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold mb-2">邮件列表</h3>
        <p class="text-dark/70 text-sm mb-4">订阅我们的邮件列表，获取最新动态</p>
        <a href="#" class="text-primary hover:underline inline-flex items-center">
          订阅 <i class="fa fa-external-link ml-1"></i>
        </a>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="mt-16 max-w-3xl mx-auto">
      <h3 class="text-2xl font-semibold mb-8 text-center">常见问题</h3>
      
      <div class="space-y-4">
        <!-- 问题 1 -->
        <div class="border border-dark/10 rounded-lg overflow-hidden">
          <button class="faq-toggle w-full flex justify-between items-center p-4 bg-light hover:bg-light/70 transition-custom text-left">
            <span class="font-medium">Snow 是免费的吗？</span>
            <i class="fa fa-chevron-down text-dark/50 transition-transform"></i>
          </button>
          <div class="faq-content hidden p-4 border-t border-dark/10">
            <p class="text-dark/70">是的，Snow 是一个开源项目，基于 MIT 许可证发布，你可以免费使用、修改和分发它，无论是个人用途还是商业用途。</p>
          </div>
        </div>
        
        <!-- 问题 2 -->
        <div class="border border-dark/10 rounded-lg overflow-hidden">
          <button class="faq-toggle w-full flex justify-between items-center p-4 bg-light hover:bg-light/70 transition-custom text-left">
            <span class="font-medium">如何获取 Snow 的技术支持？</span>
            <i class="fa fa-chevron-down text-dark/50 transition-transform"></i>
          </button>
          <div class="faq-content hidden p-4 border-t border-dark/10">
            <p class="text-dark/70">你可以通过我们的 Gitee 仓库提交 issues，参与讨论区的讨论，加入微信群或发送邮件到 support@snow.org 获取技术支持。社区成员和开发者会尽力帮助你解决问题。</p>
          </div>
        </div>
        
        <!-- 问题 3 -->
        <div class="border border-dark/10 rounded-lg overflow-hidden">
          <button class="faq-toggle w-full flex justify-between items-center p-4 bg-light hover:bg-light/70 transition-custom text-left">
            <span class="font-medium">我可以为 Snow 贡献代码吗？</span>
            <i class="fa fa-chevron-down text-dark/50 transition-transform"></i>
          </button>
          <div class="faq-content hidden p-4 border-t border-dark/10">
            <p class="text-dark/70">当然可以！我们非常欢迎社区贡献。你可以查看我们的贡献指南，了解如何提交代码、修复 bug 或添加新功能。无论贡献大小，我们都非常感谢你的支持。</p>
          </div>
        </div>
        
        <!-- 问题 4 -->
        <div class="border border-dark/10 rounded-lg overflow-hidden">
          <button class="faq-toggle w-full flex justify-between items-center p-4 bg-light hover:bg-light/70 transition-custom text-left">
            <span class="font-medium">Snow 的未来发展计划是什么？</span>
            <i class="fa fa-chevron-down text-dark/50 transition-transform"></i>
          </button>
          <div class="faq-content hidden p-4 border-t border-dark/10">
            <p class="text-dark/70">我们有一个公开的路线图，详细说明了未来的发展计划，包括新功能、性能改进和其他增强。你可以在我们的文档中查看路线图，并通过社区渠道提供你的建议和反馈。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
